<template>
	<view>
		<view style="margin: 20rpx auto;background-color: #FFFFFF;box-sizing: border-box;padding:20rpx 30rpx;border-radius: 16rpx;width: 92%;">
			<view style="overflow: hidden;">
				<view style="float: left;width: 23%;overflow: hidden;">
					<image :src="info.avatar" style="width: 112rpx;height: 112rpx;border-radius: 50%;display: block;" mode=""></image>
				</view>
				<view style="width: 77%;float: left;padding: 10rpx 0;">
					<view style="color: #000000;font-size: 30rpx;font-weight: 600;line-height: 50rpx;" class="yihang">
						{{info.name || ''}}
					</view>
					<view style="color: #999999;font-size: 24rpx;line-height: 50rpx;" class="yihang">
						{{info.introduction || ''}}
					</view>
				</view>
			</view>
		</view>
		<view style="width: 92%;margin: 20rpx auto;background-color: #FFFFFF;border-radius: 15rpx;padding: 0 30rpx;box-sizing: border-box;">
			<view class="" style="line-height: 100rpx;overflow: hidden;">
				<text style="color: #333;font-size: 32rpx;font-weight: 600;float: left;">
					群成员
				</text>
				<text @click="qun_chengyuan" style="color: #999999;font-size: 24rpx;float: right;">
					查看{{member_num || ''}}名群成员<text style="margin-left: 6rpx;font-size: 26rpx;" class="iconfont icon-xiangyou"></text>
				</text>
			</view>
			<view class="yuan_box">
				<view v-for="(item,index) in member" :key='index' style="width: 100rpx;text-align: center;float: left;">
					<image :src="item.avatar" style="width: 80rpx;height: 80rpx;border-radius: 50%;display: block;margin: 0 auto;" mode=""></image>
					<view style="text-align: center;font-size: 22rpx;color: #333;line-height: 40rpx;" class="yihang">
						{{item.name || ''}}
					</view>
				</view>
				<!-- <view @click="yaoqing" style="width: 100rpx;text-align: center;float: left;">
					<image src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230510/3d98af307ea153ac71ec300a2829c036.png" style="width: 80rpx;height: 80rpx;border-radius: 50%;display: block;margin: 0 auto;" mode=""></image>
					<view style="text-align: center;font-size: 22rpx;color: #333;line-height: 40rpx;">
						邀请
					</view>
				</view> -->
			</view>
		</view>
		<view style="width:88%;margin: 40rpx auto 20rpx;line-height: 40rpx;color: #999999;font-size: 24rpx;">
			群聊信息
		</view>
		<view style="width: 92%;margin: 0rpx auto 20rpx;background-color: #FFFFFF;border-radius: 15rpx;padding: 20rpx 40rpx;box-sizing: border-box;">
			<view style="width: 100%;">
				 <view style="line-height: 100rpx;display: flex;border-bottom: 1px solid #eee;">
					 <view style="flex: 1;color: #333;font-size: 32rpx;font-weight: 600;">
						 群头像
					 </view>
					 <view style="flex: 3;overflow: hidden;">
						 <image :src="info.avatar" style="width:64rpx;height: 64rpx;border-radius: 50%;display: block;float: right;margin-top: 18rpx;" mode=""></image>
					 </view>
				 </view>
				 <view style="line-height: 100rpx;display: flex;border-bottom: 1px solid #eee;">
				 	<view style="flex: 1;color: #333;font-size: 32rpx;font-weight: 600;">
				 		群聊名称
				 	</view>
				 	<view style="flex: 3;color: #999;font-size: 28rpx;text-align: right;" class="yihang">
				 		<input :disabled="true" v-model="info.name" type="text" style="width: 100%;height: 60rpx;padding: 20rpx 0;text-align: right;" placeholder-style="color:#999;" placeholder="请输入群名称">
				 	</view>
				 </view>
				 <view style="line-height: 100rpx;display: flex;">
				 	<view style="flex: 1;color: #333;font-size: 32rpx;font-weight: 600;">
				 		群介绍
				 	</view>
				 	<view style="flex: 3;color: #999;font-size: 28rpx;text-align: right;" class="yihang">
				 		<input :disabled="true" v-model="info.introduction" type="text" style="width: 100%;height: 60rpx;padding: 20rpx 0;text-align: right;" placeholder-style="color:#999;" placeholder="请输入群介绍" >
				 	</view>
				 </view>

			</view>
		</view>

		<view @click="jiaqun" style="width: 690rpx;height: 98rpx;background: #1fb0ac;border-radius: 49rpx;line-height: 98rpx;text-align: center;color:#ffffff;font-size: 32rpx;font-weight: 600;margin:200rpx auto 0;">
			加入
		</view>
		<!-- <view v-if="group_admin!=1" @click="user_xiugai" style="width: 690rpx;height: 98rpx;background: #1fb0ac;border-radius: 49rpx;line-height: 98rpx;text-align: center;color:#ffffff;font-size: 32rpx;font-weight: 600;margin:200rpx auto 0;">
			修改昵称
		</view>
		<view v-if="group_admin==1" @click="jiesan" style="width: 690rpx;height: 98rpx;background: #FFFFFF;border-radius: 49rpx;line-height: 98rpx;text-align: center;color:#E60012;font-size: 32rpx;font-weight: 600;margin:20rpx auto 0;">
			解散群聊
		</view>
		<view v-if="group_admin!=1" @click="tuichu_qun" style="width: 690rpx;height: 98rpx;background: #FFFFFF;border-radius: 49rpx;line-height: 98rpx;text-align: center;color:#E60012;font-size: 32rpx;font-weight: 600;margin:20rpx auto 0;">
			退出群聊
		</view> -->
		<uploadImg :singleNum="true" ref="uploadImg" v-model="info.avatar" permissionCameraContent="获取拍照权限是为了上传群头像" permissionAlbumContent="获取相册权限，是为了上传群头像" />
	</view>
</template>

<script>
	import isAuditIos from '@/common/isAuditIos.js'
	export default{
		mixins: [isAuditIos],
		data(){
			return{
				id:'',
				info:{},
				member:[],
				user_member:{},
				group_admin:'',
				member_num:''
			}
		},
		onLoad(option) {
			this.id=option.id

		},
		onShow() {
			this.qz_xx()
		},
		methods:{
			// 加群
			jiaqun:function(index){
				let that=this
				this.post('api/client/info', '', true).then(res => {
					console.log(res)
					if (res.code == 1) {
						that.post('api/im/im/check_group',{group_id:that.id},true).then(re=>{
							if(re.code==1){
								uni.navigateTo({
									url:'/sub/pages/jr_shenqing?avatar='+that.info.avatar+'&name='+that.info.name+'&jieshao='+that.info.introduction+'&id='+that.id
								})
							}else if(re.code==211){
								if (that.iosUpAppStore) {
									uni.showModal({
										title: '提示',
										content: re.msg,
										success: function(res1) {
											if (res1.confirm) {
												uni.navigateTo({
													url: '../../subpages/pages/vip'
												})
											} else if (res1.cancel) {

											}
										}
									});
								}
							}else{
								uni.showToast({
									title: re.msg,
									icon: "none",
									duration: 1000
								})
							}
						})
						return
						if(res.data.is_vip==1){
							uni.navigateTo({
								url:'/sub/pages/jr_shenqing?avatar='+this.list2[index].avatar+'&name='+this.list2[index].name+'&jieshao='+this.list2[index].introduction+'&id='+this.list2[index].group_id
							})
						}else if(res.data.is_vip==2){
							uni.showModal({
								title: '提示',
								content: '您的会员已到期,只有会员才可以加群,请前去续费会员！',
								success: function (res1) {
									if (res1.confirm) {
										uni.navigateTo({
											url:'../../subpages/pages/vip'
										})
									} else if (res1.cancel) {

									}
								}
							});
						}else if(res.data.is_vip==0){
							uni.showModal({
								title: '提示',
								content: '只有会员才可以加群,请前去开通会员！',
								success: function (res1) {
									if (res1.confirm) {
										uni.navigateTo({
											url:'../../subpages/pages/vip'
										})
									} else if (res1.cancel) {

									}
								}
							});
						}
					}
				})
			},
			// 群组信息
			qz_xx:function(){
				this.post('api/im/im/group_info',{group_id:this.id},true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.info=res.data.info
						this.member=res.data.member
						this.user_member=res.data.user_member
						this.group_admin=res.data.group_admin
						this.member_num=res.data.member_num
					}
				})
			},
			qun_chengyuan:function(){
				uni.navigateTo({
					url:'/sub/pages/qun_chengyuan?id='+this.id
				})
			},
			yaoqing:function(){
				uni.navigateTo({
					url:'/sub/pages/yaoqing?id='+this.id
				})
			},
			jiesan:function(){
				let that=this
				uni.showModal({
					title: '提示',
					content: '您确定要解散该群聊吗？',
					success: function (res) {
						if (res.confirm) {
							that.post('api/im/im/dissolve_group',{group_id:that.id},true).then(res=>{
								if(res.code==1){
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 1000
									})
									setTimeout(function(){
										uni.navigateBack({
											delta:1
										})
									},1500)
								}else{
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 1000
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			tuichu_qun:function(){
				let that=this
				uni.showModal({
					title: '提示',
					content: '您确定要退出该群聊吗？',
					success: function (res) {
						if (res.confirm) {
							that.post('api/im/im/quit_member',{group_id:that.id},true).then(res=>{
								if(res.code==1){
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 1000
									})
									setTimeout(function(){
										uni.navigateBack({
											delta:1
										})
									},1500)
								}else{
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 1000
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			admin_xiugai:function(){
				let that=this
				this.post('api/im/im/set_group_info',{name:this.info.name,avatar:this.info.avatar,introduction:this.info.introduction,group_id:this.id},true).then(res=>{
					console.log(res)
					if(res.code==1){
						that.post('api/im/im/set_nickname',{name:this.user_member.name,group_id:this.id},true).then(ress=>{
							if(ress.code==1){
								uni.showToast({
									title: res.msg,
									icon: "none",
									duration: 1000
								})
								setTimeout(function(){
									that.qz_xx()
								},1500)
							}else{
								uni.showToast({
									title: res.msg,
									icon: "none",
									duration: 1000
								})
							}
						})
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			},
			user_xiugai:function(){
				this.post('api/im/im/set_nickname',{name:this.user_member.name,group_id:this.id},true).then(res=>{
					if(res.code==1){
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
						setTimeout(function(){
							that.qz_xx()
						},1500)
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
		padding-bottom: 40rpx;
		font-family: Demibold;
	}
	.yuan_box{
		overflow: hidden;
	}
	.yuan_box>view{
		margin-right: 6rpx;
		margin-bottom: 20rpx;
	}
	.yuan_box>view:nth-child(6n+6){
		margin-right: 0;
	}
</style>